
import React from 'react'
import './index.less'
import { Toast } from 'antd-mobile';
import Car from '../../component/car'
import Location from '../../component/location'
import { ajaxGet, ajaxPost } from '../../axios/index'
class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            phone: '',
            statenum: '',
            stateText: '发送验证码',
            carnum: '',
            carText: '京',
            carkey: false,
            locakey: false,
            locaText: [],
            isDkval: false,
            isXiey: true,
            codeSetinterval: null
        };
    }

    componentDidMount() {//每次进入登录页清除之前的登录信息

    }

    //用户名
    changeUsername = (event) => {
        this.setState({ username: event.target.value });
    }

    //手机号码
    changePhone = (event) => {
        this.setState({ phone: event.target.value });
    }

    //手机号码失去光标正则验证
    blurPhone(e) {
        if (e.currentTarget.value) {
            if (!(/^1[3456789]\d{9}$/.test(e.currentTarget.value))) {
                Toast.info('请输入11位正确格式的手机号码！', 2);
                this.setState({ phone: '' });
                return false;
            }
        }
    }

    //验证码
    changeStatenum = (event) => {
        this.setState({ statenum: event.target.value });
    }

    //验证码正则
    blurstate(e) {
        if (e.currentTarget.value) {
            if (!(/^[0-9\d\s]*$/).test(e.currentTarget.value)) {
                Toast.info('请输入正确的验证码！', 2);
                this.setState({ statenum: '' });
                return false;
            }
            ajaxGet('/apis/user/checkMessageCode?mobile=' + this.state.phone + '&checkCode=' + e.currentTarget.value, {}, (res) => {
                if (!res) {
                    this.setState({ statenum: '' });
                    Toast.info('验证码错误！', 2);
                    return
                }
            });
        }
    }


    getQueryString = (name) => {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        let r = window.location.search.substr(1).match(reg);
        if (r !== null) return unescape(r[2]);
        return null;
    };


    //获取验证码
    getState = () => {
        if (!(/^1[3456789]\d{9}$/.test(this.state.phone))) {
            Toast.info('请输入11位正确格式的手机号码！', 2);
            this.setState({ phone: '' });
            return false;
        }
        ajaxGet('/apis/user/sendSmsCheckCode/' + this.state.phone, {}, (res) => {
            if (res.code === 0) {
                this.stateLess()
                Toast.info('验证码发送成功！', 2);
            } else {
                Toast.info('验证码获取失败！', 2);
            }
        });
    }

    //验证码倒计时
    stateLess = (type) => {
        let daojishi
        let code = 60;
        if (type === "false") {
            this.setState({ stateText: '发送验证码' })
            clearInterval(daojishi);
            return false
        }
        this.setState({ stateText: code + 's重新获取' })
        daojishi = setInterval(() => {
            code--;
            this.setState({ stateText: code + 's重新获取' })
            if (code === 0) {
                clearInterval(daojishi);
                this.setState({ stateText: '发送验证码' })
            }
        }, 1000)

    }

    //车牌号
    changeCarnum = (event) => {
        this.setState({ carnum: event.target.value });
    }

    // 车牌号码选择
    carCheck = () => {
        this.setState({
            carkey: true
        });
    }

    //省份选择
    locaCheck = () => {
        this.setState({
            locakey: true
        });
    }

    //获取汽车子组件的ket
    carkeyfun(key) {
        this.setState({
            carkey: key
        })
    }

    //获取汽车组件的值
    carTextfun(text) {
        this.setState({
            carText: text
        })
    }

    //省份子组件的key
    locakeyfun(key) {
        this.setState({
            locakey: key
        })
    }

    //省份子组件的值
    locaTextfun(text) {
        this.setState({
            locaText: text
        })
    }

    //是否有贷款
    isDaikuan = () => {
        this.setState({
            isDkval: !this.state.isDkval
        })
    }

    //是否阅读协议
    isXieyi = () => {
        this.setState({
            isXiey: !this.state.isXiey
        })
    }

    //全局提交
    handleClick = () => {
        if (!this.state.username) {
            return Toast.info('请输入姓名！', 1);
        }
        if (!this.state.phone) {
            return Toast.info('请输入手机号码！', 1);
        }
        if (!this.state.statenum) {
            return Toast.info('请输入验证码！', 1);
        }
        if (!this.state.carnum) {
            return Toast.info('请输入车牌号！', 1);
        }
        if (this.state.locaText.length === 0) {
            return Toast.info('请选择城市！', 1);
        }
        let cityname = '';
        for (let i = 0; i < this.state.locaText.length; i++) {
            cityname += this.state.locaText[i]
        }
        let opation = JSON.stringify({
            name: this.state.username,
            mobile: this.state.phone,
            loanid: this.getQueryString('proid'),
            haveLoan: this.state.isDkval,
            city: cityname,
            carPlate: this.state.carText + this.state.carnum
        })
        ajaxPost('/apis/carLoan', opation, (res) => {
            if (res.code === 0) {
                Toast.info('提交成功！', 2);
                this.props.history.push('/succees');
            }
        });
    }

    //协议
    goXieyi = () => {
        this.props.history.push('/xieyi');
    }



    render() {
        return (
            <div className="box">

                <Car carkey={this.state.carkey} carkeyfun={this.carkeyfun.bind(this)} carTextfun={this.carTextfun.bind(this)}></Car>

                <Location locakey={this.state.locakey} locakeyfun={this.locakeyfun.bind(this)} locaTextfun={this.locaTextfun.bind(this)}></Location>

                <div className="wrap">
                    <div className="top">
                        <img src={require('../../img/viewfile.png')} alt="" />
                    </div>
                    <div className="wrapbox">
                        <div className="con">
                            <div className="formli">
                                <label htmlFor="">姓名</label>
                                <input type="text" value={this.state.username} onChange={this.changeUsername} placeholder="请输入姓名" />
                            </div>
                            <div className="formli">
                                <label htmlFor="">手机号</label>
                                <input type="tel" value={this.state.phone} onChange={this.changePhone} onBlur={this.blurPhone.bind(this)} placeholder="请输入手机号" />
                            </div>
                            <div className="formli yzm">
                                <input type="tel" onBlur={this.blurstate.bind(this)} value={this.state.statenum} onChange={this.changeStatenum} placeholder="请输入验证码" />
                                <span></span>
                                {
                                    this.state.stateText === "发送验证码" ? (
                                        <label onClick={this.getState}>{this.state.stateText}</label>
                                    ) : (
                                            <label>{this.state.stateText}</label>
                                        )
                                }
                            </div>
                            <div className="formli car">
                                <label htmlFor="">车牌号</label>
                                <span onClick={this.carCheck}><b>{this.state.carText} </b><i></i></span>
                                <input type="text" value={this.state.carnum} onChange={this.changeCarnum} placeholder="请输入车牌号" />
                            </div>
                            <div className="formli">
                                <label htmlFor="">所在城市</label>
                                <input type="text" value={this.state.locaText} placeholder="请选择" readOnly onClick={this.locaCheck} />
                            </div>
                            <div className="formli dikuan">
                                <label htmlFor="">车辆是否有贷款</label>
                                <ul>
                                    <li className={this.state.isDkval ? "active" : null} onClick={this.isDaikuan} >
                                        <i><img src={require('../../img/icon2.png')} alt="" /></i>
                                        <span>有</span>
                                    </li>
                                    <li className={!this.state.isDkval ? "active" : null} onClick={this.isDaikuan}>
                                        <i><img src={require('../../img/icon2.png')} alt="" /></i>
                                        <span>没有</span>
                                    </li>
                                </ul>
                            </div>
                            <div className="formli xieyi">
                                <i className={this.state.isXiey ? "active" : null} onClick={this.isXieyi}><img src={require('../../img/icon2.png')} alt="" /></i>
                                <span onClick={this.isXieyi}>我已阅读并同意签署</span>
                                <a onClick={this.goXieyi}>《用户授权协议》</a>
                            </div>
                            <h1 onClick={this.handleClick}><span>立即申请</span></h1>
                        </div>
                    </div>
                </div>

                <div className="liuc">
                    <h1>贷款流程</h1>
                    <dl>
                        <dd>
                            <img src={require('../../img/viewfile (1).png')} alt="" />
                        </dd>
                        <dt>
                            <img src={require('../../img/viewfile-(5)_01.png')} alt="" />
                        </dt>
                        <dd>
                            <img src={require('../../img/viewfile (3).png')} alt="" />
                        </dd>
                        <dt>
                            <img src={require('../../img/viewfile-(5)_01.png')} alt="" />
                        </dt>
                        <dd>
                            <img src={require('../../img/viewfile (2).png')} alt="" />
                        </dd>
                        <dt>
                            <img src={require('../../img/viewfile-(5)_01.png')} alt="" />
                        </dt>
                        <dd>
                            <img src={require('../../img/viewfile (4).png')} alt="" />
                        </dd>
                    </dl>
                </div>

            </div>
        )
    }
}
export default Home
